<script setup lang="tsx">
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 模块导入 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

import { ref, shallowRef, watch } from 'vue';
import type { UploadCustomRequestOptions, UploadInst } from 'naive-ui';
import { fetchCjTaskUploadData, fetchGetCjProjectOptions } from '@/service/api';

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组件名称 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

defineOptions({
  name: 'TaskImportDataModal'
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组合式函数 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 父子传参 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const uploadRef = ref<UploadInst | null>(null);

const projectOptions = shallowRef<CommonType.Option[]>([]);

const selectedProjectId = ref<string>('');

const errorMessage = ref<string>('');

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

async function initAllProjectList() {
  const { error, data } = await fetchGetCjProjectOptions();
  if (!error && data) {
    projectOptions.value = data;
  }
}

async function customRequest({ file }: UploadCustomRequestOptions) {
  if (!selectedProjectId.value) {
    uploadRef.value!.clear();
    window.$message?.error('请选择采样项目');
    return;
  }
  const formData = new FormData();
  formData.append('projectId', selectedProjectId.value);
  formData.append('file', file.file as File);
  const { error, data: result } = await fetchCjTaskUploadData(formData);
  if (error) {
    window.$message?.error('上传失败');
  } else {
    uploadRef.value!.clear();
    if (result === 'ok') {
      errorMessage.value = result;
    } else {
      errorMessage.value = result;
    }
  }
}

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

watch(visible, () => {
  if (visible.value) {
    initAllProjectList();
    selectedProjectId.value = '';
    errorMessage.value = '';
  }
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++
</script>

<template>
  <NModal
    v-model:show="visible"
    title="导入任务数据"
    preset="card"
    class="w-600px"
    :close-on-esc="false"
    :mask-closable="false"
    @close="emit('submitted')"
  >
    <NText><b>采样项目</b></NText>
    <NSelect v-model:value="selectedProjectId" size="small" :options="projectOptions" class="mb-12px"></NSelect>
    <NText><b>上传数据</b></NText>
    <NUpload ref="uploadRef" :custom-request="customRequest" :show-file-list="false" :max="1">
      <NUploadDragger>
        <div class="mb-12px">
          <icon-carbon:bottom-panel-open class="text-48px" />
        </div>
        <NText class="text-16px">点击或者拖动文件到该区域来上传</NText>
      </NUploadDragger>
    </NUpload>
    <NText><b>上传结果：</b></NText>
    <div v-if="errorMessage === 'ok'" class="h-50px text-green">上传成功！</div>
    <div v-else-if="errorMessage" class="h-50px text-red">{{ errorMessage }}</div>
    <div v-else class="h-50px"></div>
  </NModal>
</template>

<style lang="scss" scoped></style>
